<template>
	<slot :data='ajax.data'></slot>
	<Pagination :pager='ajax.pager' @change='change' @sizeChange='sizeChange' />
	<Empty :data='ajax.data'/>
</template>

<script setup>
	import { defineProps } from 'vue'
	// ================================================================ Lazy
	const Pagination 	= $.lazy(()=>import('@antd/pagination.vue'))
	const Empty 		= $.lazy(()=>import('@antd/empty.vue'))
	// ================================================================ props
	const props = defineProps({
		api: String,
		param: Object
	})
	// ================================================================ 
	ref:ajax = { data:[], model: { ...props.param } }	// 声明
	
	const fetch = () => $http.paging(ajax, props.api)
	
	fetch()
	
	const change = (page, pageSize) => {
		ajax.model.page = page
		fetch()
	}
	
	const sizeChange = (current, size){
		ajax.model.size = current
		ajax.model.page = 1
		fetch()
	}
</script>